<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仓库管理</title>
    <!--引入axios库-->
    <script src="js/axios.min.js"></script>
    <!-- 引入VUE库 -->
    <script src="js/vue.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-tabs :tab-position="tabPosition" style="height: 100%;">
        <el-tab-pane v-for="(store,index) in stores" :label="store.cname">
            <el-menu :default-active="menu"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect"
                     active-text-color="#ffd04b">
                <el-menu-item index="1">仓库管理</el-menu-item>
                <el-menu-item index="2" @click="selectUsersSQ(store.cid)">成员管理</el-menu-item>
            </el-menu>
            <div v-if="menu==1">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="仓库名称">
                        <el-input v-model="store.cname"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库状态">
                        <el-radio-group v-model="store.overt">
                            <el-radio label="私有"></el-radio>
                            <el-radio label="公开"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="仓库简介">
                        <el-input type="textarea" v-model="store.introduce"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(store)">保存修改</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="menu==2">
                <!--                审核入库请求-->
                <!--                展示仓库所有成员  &ndash;&gt;  仓主 管理员 普通成员(包括自己)  排序-->
                <!--                可对其成员进行操作：1.给与管理员权限 2.踢出仓库 3.若是管理员，可以解除其权限 4.不可对仓主操作-->
                <!--                只有登陆者是仓主才有逇 转让仓库 按钮-->
                <div style="display: inline;justify-content: space-between;text-align: center">
                    <div style="width: 370px;float: left;border-left:1px solid dodgerblue;">
                        <template>
                            <el-table
                                    :data="userSQ"
                                    style="width: 100%" >
                                <el-table-column label="用户头像" width="120">
                                    <template slot-scope="scope">
                                        <img :src="scope.row.user.head" width="30" height="30" />
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="user.nickName"
                                        label="昵称"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        label="申请加入仓库"
                                        width="120">
                                    <template slot-scope="scope">
                                        <el-button @click="agreeOrRefuse(scope.row,true)" type="text" size="small">同意
                                        </el-button>
                                        <el-button @click="agreeOrRefuse(scope.row,false)" type="text" size="small">拒绝
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                    <div style="float: left;border-left:1px solid dodgerblue;width: 600px;height: 600px;">
                        <el-table
                                :data="usersInStore"
                                style="width: 100%">
                            <el-table-column label="用户头像" width="120">
                                <template slot-scope="scope">
                                    <img :src="scope.row.user.head" width="30" height="30" />
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="user.nickName"
                                    label="昵称"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="level"
                                    label="职位"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    label="仓库成员管理"
                                    width="200">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.level=='成员'" width="50"
                                               @click="storeManage(scope.row,2)" type="text" size="small">升为管理员
                                    </el-button>
                                    <el-button v-if="scope.row.level=='管理员'" width="50"
                                               @click="storeManage(scope.row,3)" type="text" size="small">解除管理员
                                    </el-button>
                                    <el-button v-if="scope.row.level!='仓主'" width="50"
                                               @click="storeManage(scope.row,0)" type="text" size="small">踢出仓库
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>

        </el-tab-pane>
    </el-tabs>
</div>
</body>
<script th:inline="javascript">
    var v = new Vue({
        el: "#app",
        data: {
            stores: "",//我管理的仓库列表及信息
            menu: '1',//水平菜单栏
            tabPosition: "left",//左侧菜单栏
            userSQ: new Array(),//当前选择仓库的申请入库人员列表
            usersInStore: new Array(),//仓库人员   selectUsersInStoreByCid
        },
        created() {
            //根据传过来的uid查询该用户职位是管理员以及以上的仓库
            this.selectStoresByUid();
        },
        methods: {
            //仓库成员管理
            storeManage(row,state){
                let param = new URLSearchParams();
                param.append("id", row.id);
                param.append("level",state)// state意思：  0 表踢出  其它表要修改为level
                axios.post("sp-store/cloudvideo/storeUser/storeManage", param).then(res => {

                    //修改或删除表格对应行
                    for (let i = 0; i < this.usersInStore.length; i++) {
                        if (this.usersInStore[i].id == row.id) {
                            if(state==0) {
                                this.usersInStore.splice(i, 1);
                            }
                            else if(state==2) {
                                this.usersInStore[i].level = '管理员'
                            }else if(state==3) {
                                this.usersInStore[i].level = '成员'
                            }
                        }
                    }

                    this.$message({
                        message: state==0 ? '踢出'+row.user.nickName+'成功' : row.user.nickName+'的权限变动成功',
                        type: 'success'
                    });

                })
            },
            //拒绝入库申请
            agreeOrRefuse(row, agree) {
                console.log(row)
                let param = new URLSearchParams();
                param.append("id", row.id);
                param.append("agree", agree);
                axios.post("sp-store/cloudvideo/storeUser/changeOneUserSQ", param).then(res => {
                    if (res.data >= 1) {
                        //删除表格对应行
                        for (let i = 0; i < this.userSQ.length; i++) {
                            // console.log()
                            if (this.userSQ[i].id == row.id) {
                                // let a=false;
                                this.userSQ.splice(i, 1);
                            }
                        }
                        this.$message({
                            message: agree ? '审核通过' : '已拒绝',
                            type: 'success'
                        });
                    } else {

                    }
                })
            },
            //查询仓库申请列表
            selectUsersSQ(cid) {
                let param = new URLSearchParams();
                param.append("cid", cid);
                axios.post("sp-store/cloudvideo/storeUser/selectUsersSQ", param).then(res => {
                    this.userSQ = res.data;
                })
                this.selectUsersInStoreByCid(cid)
            },
            //仓库人员展示
            selectUsersInStoreByCid(cid) {
                let param = new URLSearchParams();
                param.append("cid", cid);
                axios.post("sp-store/cloudvideo/storeUser/selectUsersInStoreByCid", param).then(res => {
                    this.usersInStore = res.data;
                    //将等级替换为具体职位
                    for (let i = 0; i < this.usersInStore.length; i++) {
                        if(this.usersInStore[i].level==1){this.usersInStore[i].level='仓主'}
                        else if(this.usersInStore[i].level==2){this.usersInStore[i].level='管理员'}
                        else if(this.usersInStore[i].level==3){this.usersInStore[i].level='成员'}
                    }
                })
            },
            //根据传过来的uid查询该用户职位是管理员以及以上的仓库
            selectStoresByUid() {
                let uid = [[${param.uid}]]
                let param = new URLSearchParams();
                param.append("uid", uid[0]);
                axios.post("sp-store/cloudvideo/storeUser/selectStoresByUidToGuanLi", param).then(res => {
                    this.stores = res.data;
                    //将 0 1 换成 私有 公开
                    for (let i = 0; i < this.stores.length; i++) {
                        if (this.stores[i].overt == 0)
                            this.stores[i].overt = '私有';
                        else
                            this.stores[i].overt = '公开';
                    }
                })
            },
            handleSelect(key, keyPath) {
                this.menu = key
            },
            //修改仓库信息
            onSubmit(store) {
                let mystore = store;
                //将 私有 公开 换成 false true
                if (mystore.overt == '私有')
                    mystore.overt = false;
                else
                    mystore.overt = true;

                let param = new URLSearchParams();
                console.log(mystore)
                for (let storeKey in mystore) {
                    if (storeKey == 'user' || storeKey == 'regTime')
                        continue;
                    param.append('' + storeKey, mystore[storeKey])
                }
                //换回来
                if (mystore.overt == false)
                    mystore.overt = '私有';
                else
                    mystore.overt = '公开';
                //发送ajax请求
                axios.post("sp-store/cloudvideo/storeUser/updateStoreGuanLi", param).then(res => {
                    if (res.data == 1) {
                        this.$alert("仓库信息更新成功")
                    } else {
                        this.$alert("仓库信息更新失败！原因：仓库不存在")
                    }

                })
            },
            //删除仓库
            deleteStore() {

            },
        }
    })
</script>
</html>